<template>
  <div class="owners-group">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/sys/management?navIndex=2' }">业委会</el-breadcrumb-item>
      <el-breadcrumb-item
        :to="{ path: '/sys/management?navIndex=2' }"
        v-if="dtype!='list'"
        @click.native="dtype='list'"
      >管理员</el-breadcrumb-item>
      <el-breadcrumb-item v-if="dtype=='list'">管理员</el-breadcrumb-item>
      <el-breadcrumb-item v-if="dtype=='add'">添加管理员</el-breadcrumb-item>
      <el-breadcrumb-item v-if="dtype=='edit'">编辑管理成员</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40">
      <el-row class="el-padding-20 el-white-bgcolor">
        <el-row v-show="dtype==='list'">
          <el-button type="primary" size="small" @click="routeTo('add')">添加成员</el-button>
          <el-table
            class="el-margin-t-10"
            :data="table.tableData"
            border
            stripe
            style="width:100%"
            size="small"
            :highlight-current-row="true"
            ref="multipleTable"
          >
            <el-table-column label="姓名" prop="name" width="180"></el-table-column>
            <el-table-column label="手机号码" prop="telephone" width="180"></el-table-column>
            <el-table-column label="最后登录时间" prop="time">
              <template slot-scope="scope">{{scope.row.time|dateformat()}}</template>
            </el-table-column>
            <el-table-column label="状态" prop="status" width="180">
              <template slot-scope="scope">{{scope.row.status===0?"禁用":"启用"}}</template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="statOrEnd(scope.row)"
                >{{scope.row.status===0?"启用":"禁用"}}</el-button>
                <el-button type="text" @click="routeTo('edit',scope.row)">编辑</el-button>
                <el-button type="text" @click="reset(scope.row)">重置密码</el-button>
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="el-margin-t-10 my-el-pagination"
            @current-change="currentChangeHandle"
            :current-page="table.currentPage"
            :page-size="table.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="table.rowCount"
          ></el-pagination>
        </el-row>
        <ou-editor v-show="dtype!=='list'" :dtype="dtype" @rePrev="rePrev" :ruleForm="curRow"></ou-editor>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { bus } from "../../tools/bus";
import { setItem, getItem } from "../../tools/common";
import ouEditor from "./addOrEditM.vue";
export default {
  components: {
    ouEditor
  },
  data() {
    return {
      dtype: "list",
      curRow: {},
      table: {
        tableData: [],
        currentPage: 1,
        pageSize: 4,
        rowCount: 3,
        queryKey: ""
      }
    };
  },
  mounted() {
    this.getMessage();
  },
  methods: {
    routeTo(type, rows) {
      let self = this;
      let info = getItem("info") ? getItem("info") : {};
      self.dtype = type;
      self.curRow = rows
        ? rows
        : {
            communityId: info.communityId,
            name: "",
            telephone: "",
            password: ""
          };
    },
    getMessage() {
      let url = "/mng/list";
      let info = getItem("info") ? getItem("info") : {};
      let p = {
        communityId: info.communityId,
        start: (this.table.currentPage - 1) * this.table.pageSize,
        num: this.table.pageSize
      };
      this.$http
        .fetch(url, p)
        .then(res => {
          //console.log(`res`, res);
          this.table.tableData = [];
          this.table.rowCount = res.data.total;
          for (let i = 0; i < res.data.rows.length; i++) {
            let row = res.data.rows[i];
            this.table.tableData.push({
              mngId: row.mngId ? row.mngId : "",
              communityId: info.communityId,
              name: row.realName ? row.realName : "",
              telephone: row.phoneNum ? row.phoneNum : "",
              time: row.lastLoginTime ? row.lastLoginTime : "",
              status: row.usable ? row.usable * 1 : 0
            });
          }
        })
        .catch(err => {});
    },
    del(rows) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/mng/delete";
          let p = {
            mngId: rows.mngId
          };

          this.$http
            .fetch(url, p)
            .then(res => {
              this.$message({
                type: "success",
                message: `删除成功`
              });

              if (
                this.table.tableData.length == 1 &&
                this.table.currentPage > 1
              ) {
                this.table.currentPage -= 1;
              }
              this.getMessage();
            })
            .catch(err => {});
        })
        .catch(() => {});
    },
    currentChangeHandle(pageNum) {
      this.table.currentPage = pageNum;
      this.getMessage();
    },
    reset(rows) {
      let self = this;
      let info = getItem("info") ? getItem("info") : {};
      self.dtype = "reset";
      self.curRow = rows
        ? rows
        : {
            communityId: info.communityId,
            mngId: "",
            name: "",
            telephone: "",
            password: ""
          };
    },
    statOrEnd(rows) {
      let confirmMes = rows.status === 1 ? "禁用" : "启用";

      this.$confirm(`是否确认${confirmMes}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/mng/" + (rows.status === 1 ? "disable" : "usable");

          let p = {
            mngId: rows.mngId
          };
          this.$http
            .fetch(url, p)
            .then(res => {
              this.$message({
                type: "success",
                message: `${confirmMes}成功`
              });
              this.getMessage();
            })
            .catch(err => {});
        })
        .catch(() => {});
    },
    rePrev(isUpdate) {
      this.dtype = "list";
      if (isUpdate) {
        this.getMessage();
      }
    }
  }
};
</script>
